{% extends "base.html" %}
{% block title %}氧化钙|我的作品{% endblock %}
{% block head %}
<link rel="stylesheet" href="static/css/base.css">
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
{% endblock %}
{% block body %}
<div class="main_body">
  <div class="main_in_body">
  <div style="display: block;">
  <h2 style="float: left;">我的项目</h2>
  <a href="/newproject" style="float: right;" class="btn btn-primary">+ 新建项目</a>
 </div>
 <br><br>
  {% for i in range(0, ProjectData|length) %}
      <div class="row shadow" style="padding: 10px;height: 100px;width: 100%;">
        <img src="{{ ProjectData[i].cover }}" class="cover_img" alt="作品封面" style="border-radius: 8px;" width="100px">
        <div style="margin-left: 20px;">
          <div style="overflow:hidden;width: 500px;">
              <a style="white-space: nowrap;color:black;text-decoration: none;font-size: 15px;" href="/project/{{ ProjectData[i].id }}">{{ ProjectData[i].title }}</a>
          </div>
            <button onclick="window.open('/editor/{{ ProjectData[i].id }}')"class="small-button">编辑</button>
            <button type="button" class="small-button" data-toggle="modal" data-target="#Modal{{ ProjectData[i].id }}">
              删除
            </button>
        </div>  
      </div>
      <div class="modal fade" id="Modal{{ ProjectData[i].id }}" tabindex="-1" aria-labelledby="ModalLabel" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-body">
                确认删除 - {{ ProjectData[i].title }}
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <a type="button" class="btn btn-primary" href="/del/{{ ProjectData[i].id }}">确定</a>
              </div>
            </div>
          </div>
      </div>
  {% endfor %}

    <br>
    <hr  style="display: block;content: '';clear: both;" >
                <nav aria-label="Page navigation example">
                  <ul class="pagination">
                    <li class="page-item">
                      <a class="page-link" href="?page=1" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                      </a>
                    </li>
                    {% for i in p.iter_pages() %}
                      {% if index == i%}
                      <li class="page-item active"><a class="page-link" href="?page={{i}}">{{i}}</a></li>
                      {% else %}
                      <li class="page-item"><a class="page-link" href="?page={{i}}">{{i}}</a></li>
                      {% endif %}
                    {% endfor %}
                    <li class="page-item">
                      <a class="page-link" href="?page=-1" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                      </a>
                    </li>
                  </ul>
                </nav>
</div>


{% endblock %}
